<!doctype html>
<html lang="en">
<head>
	<title>Tabs - Custom Content via Ajax Request</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="Content via Ajax" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijtabs.css" rel="stylesheet" type="text/css" />
	<script src="../../wijmo/jquery.wijmo.wijtabs.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(function() {
		
			function loadContent(ui, ajaxOptions){
				var url = 'ajax/content' + (ui.index + 1) + '.html';
				$.ajax($.extend({}, ajaxOptions, {
					url: url,
					success: function(r, s) {
						r = "<p style='color:blue'>Customized content:</p>" + r;
						$( ui.panel ).html(r);
						try {
							ajaxOptions.success(r, s);
						}
						catch (e1) {}
					},
					error: function(xhr, s, e) {
						$( ui.panel ).html(
							"Couldn't load this tab. We'll try to fix this as soon as possible. " +
							"If this wouldn't be a demo." );
						try {
							ajaxOptions.error(xhr, s, ui.index, ui.tab);
						}
						catch (e2) {}
					}
				}));
			}
		
			$( "#tabs" ).wijtabs({
				beforeShow: function(event, ui){
					loadContent(ui);
					return false;
				}
			});
		});

	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
		
			<div id="tabs">
				<ul>
					<li><a>Tab 1</a></li>
					<li><a>Tab 2</a></li>
					<li><a>Tab 3</a></li>
				</ul>
			</div>

			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
		<p>
		
		In this sample, the wijwizard widget loads pages via Ajax. The sample shows you how the wijwizard handles different pages in Ajax. For example, it shows you how it would work preloaded, how it would work normally, how it would work with a slow page, and how it would work if a page were disabled.
		</p>
  </div>
	</div>
</body>
</html>
